<template>
	<view class="pop-wp" v-if="wushopSaleprice">
		<view class="shop-blck" @click.stop="clear"></view>
		<view class="pop-nr">
			<view class="title">
				<image :src="info.goods_info.thumb"></image>
				<view>
					<view class="jiage">￥{{wushopSaleprice||0}}</view>
				</view>
			</view>
			<view class="guige-chima">
				<view class="guige-chima-titlt">{{info.park_goods_info.goods_name}}</view>
				<view class="gc_min_tit" v-if="type=='debutAgroup'">
					需参与{{info.park_goods_info.limit_member_num}}份即可一键成团
				</view>
				<view class="gc_min_tit" v-if="type=='Offered'">
					发起人{{userData.group_member_info.nickname}}还差{{userData.remain_num}}人成功拼团
				</view>
			</view>
			<view class="number">
				<view>拼团数量</view>
				<view class="number-right" v-if="type!='debutAgroup'">
					<view @click="num(0)">-</view>
					<input type="number" v-model="wunumber" @blur="changeWunumber" />
					<view @click="num(1)">＋</view>
				</view>
				<view class="number-right" v-else>
					{{info.park_goods_info.limit_member_num}}
				</view>
			</view>
			<view class="btn" v-if="type=='debutAgroup'" @click="success0">
				一键成团
			</view>
			<view class="btn" v-else-if="type=='Offered'" @click="success0">
				一键参团
			</view>
			<view class="btn" v-else @click="success0">
				立即开团
			</view>
			<view class="chahao" @click="clear">
				×
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wunumber: 1,
				wushop: {},
				btnOK: false,
				younumber: 1,
				youshops: [],
				youshop: {},
				youoncetitle: '',
				oncebol: 0,
				moreshops: [],
				morebol: [],
				specss: [],
				hui: [],
				youshopSaleprice: '',
				wushopSaleprice: '',
				info: {}
			}
		},
		props: ['type', 'goodsid', 'parkId', 'userData','mid'],
		mounted() {
			var that = this;
			that.oks = that.ok;
			that.Show()
			that.btnOK = true;
		},
		updated() {
			if (this.ok != '已售罄') {
				this.oks = this.ok;
			}
			if (this.youshop.stock <= 0) {
				this.ok = '已售罄';
			} else {
				this.ok = this.oks;
			}
		},
		methods: {
			changeWunumber(e) {
				console.log('e/////////', e);
				let data = Number(e.detail.value)
				let lemitNumber;
				if (this.type == 'Offered') {
					lemitNumber = Number(this.userData.remain_num)
				} else {
					lemitNumber = Number(this.info.park_goods_info.limit_member_num)
				}
				if (data > lemitNumber) {
					this.wunumber = lemitNumber
				}
			},
			// 初始化数据
			Show() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				this.$axios('Group/getGroupListByGoodsId', "POST", 'group_buy', {
					goodsid: this.goodsid,
					park_id: this.parkId,
					// goodsid:'8930312',
					// park_id:6,
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						that.info = res.data.data;
						that.wushopSaleprice = that.info.park_goods_info.group_price
					}
				}, (error) => {

				})
			},
			// 关闭弹出框
			clear() {
				this.$emit('cler');
			},
			// 无规格加减数量
			num(val) {
				let lemitNumber = 1
				if (this.type == 'Offered') {
					lemitNumber = this.userData.remain_num
				} else {
					lemitNumber = this.info.park_goods_info.limit_member_num
				}
				let currentNum = Number(this.wunumber);
				if (val === 1) {
					this.wunumber = currentNum < lemitNumber ? currentNum + 1 : lemitNumber;
				} else {
					this.wunumber = currentNum > 1 ? currentNum - 1 : 1;
				}
				this.wushopSaleprice = Number((this.info.park_goods_info.group_price * this.wunumber).toFixed(2));
			},
			// 无规格提交
			success0() {
				var that = this;
				wusuccess(that);
			},
		},

	}
	// 无规格提交
	function wusuccess(that) {
		let type = that.type == 'Offered' ? 0 : 1
		console.log('that.userData???????',that.userData);
		let id= that.type == 'Offered' ? that.userData.id : ''
		let num=that.type == 'debutAgroup' ? that.info.park_goods_info.limit_member_num : that.wunumber
		uni.navigateTo({
			url: '/pages/pintuan/createOrder?goodsid=' + that.goodsid + '&park_id=' + that.parkId + '&group_id=' +
				id + '&optionid=0&num=' + num + '&new_group=' + type+ '&agent_member_id=' + that.mid
		});
	}
</script>

<style lang="scss" scoped>
	.pop-wp {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.pop-nr {
		width: 100%;
		background-color: #fff;
		padding-bottom: 20rpx;
		position: absolute;
		bottom: 0;
		font-size: 28upx;
		color: #333;
		border-radius: 10upx 10rpx 0 0;
		z-index: 1001;
	}

	.title {
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		// border-bottom: 1upx rgba(0, 0, 0, 0.2) solid;
	}

	.title image {
		width: 200upx;
		height: 200upx;
		position: relative;
		top: -20upx;
		margin: 0 30upx;
		border: 1px rgba(0, 0, 0, 0.2) solid;
	}

	.title view {
		flex: 1;
		color: #333;
		font-size: 24upx;
	}

	.title view .jiage {
		font-size: 28upx;
		color: #9A1FE8;
		font-weight: bold;
		margin: 20upx 0;
	}

	.title view .kucun {
		color: #C0C4CC;
	}

	.guige-chima,
	.number {
		padding: 16upx 30upx 0;
		font-size: 28rx;
		color: #13001E;
	}

	.guige-chima-titlt {
		font-size: 28rpx;
		color: #13001E;
		font-weight: bold;
	}

	.guige-chima-titlt-xuanze {
		width: 100%;
		margin: 10upx 0;
		padding: 10upx 0 10upx;
	}

	.guige-chima-titlt-xuanze view {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: rgba(12, 12, 12, 0.1);
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		box-sizing: border-box;
		border: 1upx #fff solid;
	}

	.guige-chima-titlt-xuanze .hui {
		color: #999;
	}

	.guige-chima-titlt-xuanze .xuan {
		background-color: rgba(250, 67, 106, 0.1);
		color: #fa436a;
	}

	.gc_min_tit {
		color: #9A1FE8;
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20upx;
		margin: 20rpx 0;
	}

	.number-right {
		width: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.number-right view,
	.number-right input {
		flex: 1;
		text-align: center;
		background-color: #DCDFE6;
		line-height: 40upx;
	}

	.number-right input {
		margin: 0 10upx;
	}

	.btn {
		/* background-color: #fa436a; */
		background-color: $bg-color;
		width: 710rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #fff;
		margin: 20upx auto;
		border-radius: 30upx;
		margin-bottom: 40rpx;
	}

	.chahao {
		font-size: 28upx;
		color: #C0C4CC;
		border: 1px #C0C4CC solid;
		width: 40upx;
		line-height: 40upx;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.xuan-guige {
		max-height: 420upx;
	}

	.shop-blck {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 0;
		left: 0;
		top: 0;
	}
</style>